<template>
  <!-- 头部组件 -->
  <navbar title="我的收藏"></navbar>
  <!-- search -->
  <view class="search">
    <u-search v-model="searchKey" :clearabled="false" @search="handleSearch" placeholder="关键字搜索" :showAction="false"
      shape="square" margin="0 30rpx 26rpx 30rpx" height="80rpx" bg-color="#f7f7f7"
      placeholderColor="#9ca3af"></u-search>
  </view>
  <view class="information">
    <view class="contain" v-for="(data, index) of collectionData" :key="data.conversationId" @click="getDetail(data)">
      <image class="icon" src="@/static/问答历史ico.png"></image>
      <text>{{ data.conversationTitle }}</text>
    </view>
  </view>
</template>

<script setup>
  import navbar from '@/components/navbar/navbar.vue'
  import {
    onLoad,
    onReachBottom
  } from '@dcloudio/uni-app'
  import {
    collection,
    QAHistory
  } from '@/api/person.js'
  import {
    ref
  } from 'vue'
  const collectionData = ref([]);

  const pageNum = ref(1);
  const pageSize = ref(10);
  const loading = ref(false);
  const noMore = ref(false);
  const isSearching = ref(false);

  const searchKey = ref('');

  onLoad(() => {
    getCollection();
  })

  const getCollection = () => {
    if (loading.value || noMore.value) return;
    loading.value = true;
    collection({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      conversationTitle: isSearching.value ? searchKey.value.trim() : ''
    }).then(res => {
      loading.value = false;
      if (res.code === 200) {
        console.log(res)
        const newData = res.rows || [];
        if (pageNum.value === 1 && newData.length === 0) {
          setTimeout(() => {
            uni.showToast({
              title: '没有发现您的收藏',
              icon: 'none',
              duration: 2000
            });
          }, 500)
          loading.value = false;
          return;
        }
        collectionData.value = [...collectionData.value, ...newData];
        if (collectionData.value.length >= res.total) {
          noMore.value = true;
        }
        if (isSearching.value && newData.length === 0) {
          uni.showToast({
            title: '没有找到相关结果',
            icon: 'none',
            duration: 2000
          });
        }
        loading.value = false;
      }
    })
  }

  onReachBottom(() => {
    if (loading.value || noMore.value) return;
    pageNum.value++;
    getCollection();
  });

  const handleSearch = () => {
    const key = searchKey.value.trim();
    isSearching.value = !!key;
    pageNum.value = 1;
    noMore.value = false;
    collectionData.value = [];
    getCollection();
  };
  const getDetail = (data) => {
    uni.navigateTo({
      url: `/pages/index/index?conversationId=${data.conversationId}`
    })
  }
</script>

<style lang="scss">
  .header {
    color: #fff;
    font-size: 36rpx;
  }

  :deep(.right-content) {
    margin-right: 75rpx;
  }

  .search {
    margin-top: 30rpx;
    width: 100%;
    height: 106rpx;
  }

  .information {
    height: 100vh;
    margin: 30rpx 30rpx 0 30rpx;

    .contain {
      display: flex;
      margin-bottom: 16rpx;
      background-color: #ffffff;
      border-radius: 16rpx;
      border: solid 2rpx rgba(229, 229, 229, 0.64);

      .icon {
        margin: 32rpx 13rpx 0 24rpx;
        width: 29rpx;
        height: 25rpx;
      }

      text {
        margin: 24rpx 24rpx 24rpx 0;
        font-family: Source Han Sans CN;
        font-size: 30rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 46rpx;
        letter-spacing: 1rpx;
        color: #333333;
        flex: 1;
      }
    }
  }
</style>